<template>
  <div id="PictureManage">
    <div style="margin: 20px 0 ">
      <a-flex justify="space-between">
        <!--   标题   -->
        <h2 style="font-weight: bold">图片管理</h2>
        <!--    按钮区域    -->
        <a-space>
          <a-button type="primary" shape="round" href="/picture/add" style="margin-right: 32px">
            创建图片
          </a-button>
          <a-button type="primary" ghost shape="round" target="_blank" href="/picture/add/batch">
            批量抓取图片
          </a-button>
        </a-space>
      </a-flex>

    </div>

    <!--  搜索表单区域  -->
    <!-- 搜索表单区域：调整滚动容器和 nowrap 逻辑 -->
    <div class="search-form">
      <!-- 新增滚动容器，负责横向滚动 -->
      <div class="form-scroll">
        <a-form layout="inline" :model="searchParams" @finish="doPictureSearch">
          <a-row :wrap="false">
            <a-col flex="280px">
              <a-form-item label="关键词" name="searchText">
                <a-input
                  v-model:value="searchParams.searchText"
                  placeholder="从名称和简介搜索"
                  allow-clear
                >
                  <template #prefix>
                    <StarOutlined />
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col flex="240px">
              <a-form-item label="类型" name="category">
                <a-auto-complete
                  v-model:value="searchParams.category"
                  placeholder="请选择分类"
                  allowClear
                  :options="categoryOptions"
                  class="form-input"
                >
                </a-auto-complete>
              </a-form-item>
            </a-col>
            <a-col flex="240px">
              <a-form-item label="标签" name="tags">
                <a-select
                  v-model:value="searchParams.tags"
                  mode="tags"
                  placeholder="请输入和选择标签"
                  allowClear
                  :options="tagOptions"
                  class="form-select"
                >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col flex="240px">
              <a-form-item label="状态" name="reviewStatus">
                <a-select
                  v-model:value="searchParams.reviewStatus"
                  mode="combobox"
                  placeholder="请选择审核状态"
                  allowClear
                  :options="PIC_REVIEW_STATUS_OPTIONS"
                  class="form-select"
                >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col flex="auto">
              <a-form-item>
                <a-button type="primary" html-type="submit"> 查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>

    <!--  图片表格展示区域  -->
    <a-table
      class="picture-table"
      :columns="columns"
      :data-source="PictureList"
      :pagination="pagination"
      @change="doTableChange"
      :scroll="{ x: 'max-content' }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'url'">
          <a-image class="Picture-avatar" :src="record.url" :width="64" />
        </template>
        <template v-if="column.dataIndex === 'category'">
          <a-tag color="blue">{{ record.category || '暂无' }}</a-tag>
        </template>

        <template v-if="column.dataIndex === 'tags'">
          <!-- 为标签容器添加自定义类名，用于控制换行逻辑 -->
          <a-space class="tag-container">
            <a-tag
              color="green"
              v-for="tag in JSON.parse(record.tags) || []"
              :key="tag"
              class="tag-item"
            >
              {{ tag }}
            </a-tag>
          </a-space>
        </template>

        <!-- 图片信息 -->
        <template v-if="column.dataIndex === 'picFormat'">
          <div>{{ record.picFormat }}</div>
        </template>
        <template v-if="column.dataIndex === 'pictureInfo'">
          <div style="font-size: 12px !important">宽度：{{ record.picWidth }}</div>
          <div style="font-size: 12px !important">高度：{{ record.picHeight }}</div>
          <div style="font-size: 12px !important">宽高比：{{ record.picScale }}</div>
        </template>
        <template v-else-if="column.dataIndex === 'picSize'">
          <div>{{ (record.picSize / 1024).toFixed(2) }}KB</div>
        </template>

        <template v-if="column.dataIndex === 'picStatusMessage'">
          <div style="font-size: 12px !important">
            图片状态：{{ PIC_REVIEW_STATUS_MAP[record.reviewStatus] }}
          </div>
          <div style="font-size: 12px !important">审核信息：{{ record.reviewMessage ?? '-' }}</div>
          <div style="font-size: 12px !important">审核人：{{ record.reviewerId ?? '-' }}</div>
        </template>

        <template v-else-if="column.dataIndex === 'editTime'">
          {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template v-else-if="column.dataIndex === 'createTime'">
          {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template v-else-if="column.key === 'action'">
          <!-- 操作按钮区域：使用网格布局控制一行显示两个按钮 -->
          <div class="action-buttons-grid">
            <a-button
              v-if="record.reviewStatus !== PIC_REVIEW_STATUS_ENUM.PASS"
              type="primary"
              ghost
              @click="doReviewPicture(record, PIC_REVIEW_STATUS_ENUM.PASS)"
              size="small"
            >通过
            </a-button>

            <a-button
              v-if="record.reviewStatus !== PIC_REVIEW_STATUS_ENUM.REJECT"
              type="primary"
              danger
              ghost
              size="small"
              @click="showModal(record)"
            >拒绝
            </a-button>

            <a-button type="primary" ghost @click="doToUpdatePicture(record.id)" size="small">编辑</a-button>
            <!--  点击删除时弹出的模态框  -->
            <a-popconfirm
              title="您确定要删除该图片吗？（删除后将永久消失）"
              ok-text="确认"
              cancel-text="取消"
              @confirm="doDeletePicture(record.id)"
            >
              <a-button type="primary" danger ghost size="small"
              >删除
              </a-button>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>
    <!--  点击拒绝时弹出的对话框提示  -->
    <a-modal v-model:open="open" title="拒绝图片展示"
             @ok="doReviewPicture(currentPicture, PIC_REVIEW_STATUS_ENUM.REJECT)" @cancel="doCancel">
      <div style="margin:32px 0; ">
        <a-input v-model:value="reviewMessageByReject" placeholder="请输入拒绝原因（可选）" />
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import {
  deletePictureUsingPost, doReviewPictureUsingPost,
  listPictureByPageUsingPost,
  listPictureTagCategoryUsingGet
} from '@/api/pictureController'
import { PictureOutlined, StarOutlined, SmileOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { PIC_REVIEW_STATUS_ENUM, PIC_REVIEW_STATUS_MAP, PIC_REVIEW_STATUS_OPTIONS } from '@/constants/picture'

const router = useRouter()

// 定义表头（dataIndex为数据库中的字段信息）
const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    ellipsis: true, // 列宽超出时显示省略号
    width: 60,
    align: 'center'
  },
  {
    title: '名称',
    dataIndex: 'name',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '图片',
    dataIndex: 'url',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '介绍',
    dataIndex: 'introduction',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '分类',
    dataIndex: 'category',
    ellipsis: true,
    width: 80,
    align: 'center'
  },
  {
    title: '标签',
    dataIndex: 'tags',
    ellipsis: true,
    width: 200,
    align: 'center'
  },
  {
    title: '格式',
    dataIndex: 'picFormat',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '图片信息',
    dataIndex: 'pictureInfo',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '大小',
    dataIndex: 'picSize',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '图片状态',
    dataIndex: 'picStatusMessage',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '创建人',
    dataIndex: 'userId',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '空间id',
    dataIndex: 'spaceId',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '编辑时间',
    dataIndex: 'editTime',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    ellipsis: true,
    align: 'center'
  }
]

// 定义数据源
// 给管理员展示未脱敏的图片信息
const PictureList = ref<API.Picture[]>([])
const total = ref(0)

// 定义查询参数
const searchParams = reactive<API.PictureQueryDTO>({
  current: 1,
  pageSize: 8,
  // 排序条件
  sortField: 'createTime',
  sortOrder: 'descend'
})

// 分页参数
const pagination = computed(() => {
  return {
    current: searchParams.current ?? 1,
    pageSize: searchParams.pageSize ?? 8,
    total: total.value,
    showSizeChanger: true,
    showTotal: () => `共 ${total.value} 条`
  }
})

// 表格变化处理
const doTableChange = (page: any) => {
  searchParams.current = page.current
  searchParams.pageSize = page.pageSize
  fetchData()
}

// 调用api，向后端请求数据
// 给管理员展示未脱敏的图片信息
const fetchData = async () => {
  const res = await listPictureByPageUsingPost({
    ...searchParams,
    nullSpaceId: true
  })
  if (res.data?.code === 0 && res.data?.data) {
    PictureList.value = res.data?.data?.records || []
    total.value = res.data?.data?.total || 0
  } else {
    message.error('数据获取失败')
  }
}

// 分类标签和图片标签
const categoryOptions = ref<string[]>([])
const tagOptions = ref<string[]>([])

// 获取分类标签和图片标签
const getPictureTagCategory = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data?.code === 0 && res.data?.data) {
    // @ts-ignore
    categoryOptions.value = (res.data.data.categoryList ?? []).map((category) => ({
      value: category,
      label: category
    }))
    // @ts-ignore
    tagOptions.value = (res.data.data.tagList ?? []).map((tag) => ({
      value: tag,
      label: tag
    }))
  } else {
    message.error('加载标签失败: ' + res.data?.message)
  }
}

// 定义钩子函数，页面挂载时加载数据
onMounted(() => {
  fetchData()
  // 加载数据
  getPictureTagCategory()
})

// 提交表单的搜索处理
const doPictureSearch = async () => {
  // 重置页码(重要)
  searchParams.current = 1
  await fetchData()
}

// 弹出对话框
const open = ref<boolean>(false)
// 定义用户填写的拒绝原因
const reviewMessageByReject = ref<string>('')
// 定义对话框接收的currentPicture图片信息
const currentPicture = ref<API.Picture>({})

// 显示对话框
const showModal = (record: API.Picture) => {
  open.value = true
  currentPicture.value = record
}

// 点击取消时触发
const doCancel = () => {
  reviewMessageByReject.value = ''
  open.value = false
}

// 审核图片
const doReviewPicture = async (record: API.Picture, reviewStatus: number) => {
  // 进行前端显示的映射
  const reviewStatusMessage = reviewStatus === PIC_REVIEW_STATUS_ENUM.PASS ? '审核通过' : ' 拒绝，' + reviewMessageByReject.value
  const res = await doReviewPictureUsingPost({
    id: record.id,
    reviewStatus,
    reviewMessage: reviewStatusMessage
  })
  if (res.data?.code === 0 && res.data.data) {
    message.success('操作成功')
    // 重新加载数据
    await fetchData()
    // 清空取消拒绝原因数据
    reviewMessageByReject.value = ''
    // 关闭对话框
    open.value = false
  } else {
    message.error('操作失败' + res.data?.message)
  }
}

// 删除图片
const doDeletePicture = async (id: number) => {
  if (!id) {
    return
  }
  const res = await deletePictureUsingPost({ id })
  if (res.data?.code === 0 && res.data.data) {
    message.success('删除成功')
    // 重新加载数据
    await fetchData()
  } else {
    message.error('删除失败' + res.data?.message)
  }
}

// 跳转至编辑图片页面
const doToUpdatePicture = (id: any) => {
  if (id) {
    // 以字符串传递，避免数据精度丢失
    const idStr = String(id)
    router.push({
      path: '/picture/add',
      query: { id: idStr }
    })
  }
}
</script>
<style scoped>
#PictureManage {
  padding: 10px 10px;
}

.search-form {
  margin-bottom: 24px;
}

/* 新增滚动容器样式：让表单行可横向滚动 */
.form-scroll {
  overflow-x: auto;
  min-width: 600px; /* 最小宽度，避免过窄 */
  white-space: nowrap; /* 确保内部元素不换行（配合 flex-nowrap 更保险） */
}

.picture-table {
}

.Picture-avatar {
  /* 图片自适应容器，避免拉伸 */
  object-fit: cover; /* 优先保持比例裁剪图片，适合头像/Logo */
  /* 或使用 object-fit: contain; 保持完整显示，可能留空白 */
  border-radius: 50%; /* 核心：将正方形容器转为圆形 */
  overflow: hidden; /* 隐藏超出圆形区域的图片部分 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 可选：添加阴影增强立体感 */
}

/* 标签容器样式 - 控制最多一行显示4个标签 */
.tag-container {
  /* 设置为弹性容器，允许子元素换行 */
  display: flex;
  /* 允许内容换行 */
  flex-wrap: wrap;
  /* 清除默认间距 */
  margin: 0;
  padding: 0;
  /* 限制容器宽度，确保每行最多显示4个 */
  width: 100%;
  /* 移除a-space默认的间距样式 */
  gap: 8px !important; /* 标签之间的间距 */
}

/* 标签项样式 */
.tag-item {
  /* 计算每个标签的最大宽度（一行4个标签 + 间距） */
  /* 100%宽度 / 4个标签 = 25%，减去间距占用的宽度 */
  flex: 0 0 calc(25% - 6px); /* 减去间距的宽度，确保4个标签能放下 */
  /* 强制标签内容不换行 */
  white-space: nowrap;
  /* 文本超出时显示省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  /* 标签内边距，调整标签大小 */
  padding: 2px 8px;
  /* 标签高度，确保对齐 */
  height: 24px;
  line-height: 20px;
}

/* 操作按钮网格布局：一行显示两个按钮 */
.action-buttons-grid {
  display: grid;
  /* 定义两列网格，列宽平均分配 */
  grid-template-columns: repeat(2, 1fr);
  /* 按钮之间的间距 */
  gap: 4px;
  /* 控制整体宽度，避免过宽 */
  width: 160px;
  margin: 0 auto;
}
</style>
